<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<script src="<%=request.getContextPath() %>/static/sys/vendor/jquery.min.js"></script>
		<!--<link href="vendor/bootstrap.css" rel="stylesheet">-->
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="<%=request.getContextPath() %>/static/sys/css/index.css" />
		<script src="<%=request.getContextPath() %>/static/sys/vendor/bootstrap.min.js"></script>
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>
	<body>
		<nav class="navbar navbar-default" role="navigation">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
					<a class="navbar-brand" href="#">嗒嗒嗒博客</a>
				</div>
				<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-9" aria-expanded="false" style="height: 1px;">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
						<li><a href="#" data-toggle="modal" data-target="#myModal1">注册</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<!--登录-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content loginbox">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title">登录</h4>
					</div>
					<form action="<%=request.getContextPath() %>/sys/login" method="post" class="form-signin" role="form">
						<input type="text" class="form-control" placeholder="请输入用户名" name="username" required autofocus>
						<input type="password" class="form-control" placeholder="请输入密码" name="password" required>
						<div class="checkbox">
							<label><input type="checkbox" value="remember-me"> 记住我？</label>
						</div>
						<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
					</form>
				</div>
			</div>
		</div>
		<!--注册-->
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content loginbox">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title">注册</h4>
					</div>
					<form  action="<%=request.getContextPath() %>/sys/add" method="post" class="form-signin" role="form">
						<input type="text" class="form-control" placeholder="请输入用户名" name="code" required autofocus>
						<input type="password" class="form-control" placeholder="请输入密码" name="password" required>
						<input type="password" class="form-control" placeholder="请确认密码" required>
						<div class="checkbox">
							<label><input type="checkbox" value="remember-me"> 记住我？</label>
						</div>
						<button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
					</form>
				</div>
			</div>
		</div>
		<section class=" container content">
			<div class="col-md-8">
				<ul class="clearfix">
					<li class="list clearfix">
						<div class="list-icon ">
							<a href="private.html">
								<img src="<%=request.getContextPath() %>/static/sys/img/w12.png" /> 张三
							</a>
						</div>
						<div class="list-tit">
							<h4><a href="<%=request.getContextPath() %>/sys/listOne?id=1" >【匆匆那些年】总结个人博客经历的这四年…</a></h4>
							<p>博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补…</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">回忆</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">2016-12-28</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read"><span class="read-more">18</span></span>
							</p>
						</div>
					</li>
					<li class="list clearfix">
						<div class="list-icon ">
							<img src="<%=request.getContextPath() %>/static/sys/img/w1.png" />李四
						</div>
						<div class="list-tit">
							<h4><a href="particulars.html">【匆匆那些年】总结个人博客经历的这四年…</a></h4>
							<p>博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补…</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">回忆</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">2016-12-28</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read"><span class="read-more">18</span></span>
							</p>
						</div>
					</li>
					<li class="list clearfix">
						<div class="list-icon ">
							<img src="<%=request.getContextPath() %>/static/sys/img/w2.png" />王五
						</div>
						<div class="list-tit">
							<h4><a href="particulars.html">【匆匆那些年】总结个人博客经历的这四年…</a></h4>
							<p>博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补…</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:回忆</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">18</span>)</span>
							</p>
						</div>
					</li>
					<li class="list clearfix">
						<div class="list-icon ">
							<img src="<%=request.getContextPath() %>/static/sys/img/w5.png" />赵六
						</div>
						<div class="list-tit">
							<h4><a href="particulars.html">【匆匆那些年】总结个人博客经历的这四年…</a></h4>
							<p>博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补…</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:回忆</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">18</span>)</span>
							</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="col-md-4" >
				<ul class="list-group" id="list">
					
				</ul>
			</div>
		</section>
	</body>
	<script type="text/javascript">
		$.ajax({
			type:"get",
			url:"<%=request.getContextPath() %>/sys/listTitle",
			datatype:"json",
			success:function(data){
				var item;
				$('#list').append(
					'<li class="list-group-item active">阅读排行</li>'
						)
				$.each(data,function(i){
					item='<li class="list-group-item">'+(i+1)+'、' + data[i].title + '<span class="badge">' +data[i].readTimes + '</span></li>';
					$('#list').append(item);
					if(i == 7){
						return false;
					}
				})
			}
		});
		
		
	</script>
</html>